<template>
  <div id="app">
    <vue-progress-bar></vue-progress-bar>
    <my-header></my-header>
    <lg-preview class="preview"></lg-preview>
  </div>
</template>

<script>
  import MyHeader from '@/components/Header';
  export default {
    name: 'app',
    methods:{
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
    },
    mounted () {
      this.$Progress.finish()
    },
    created () {
      this.$Progress.start()
      this.$router.beforeEach((to, from, next) => {
        if (to.meta.progress !== undefined) {
          let meta = to.meta.progress
          this.$Progress.parseMeta(meta)
        }
        this.$Progress.start()
        next()
      })
      this.$router.afterEach((to, from) => {
        this.$Progress.finish()
      })
    },
    components: {
      MyHeader
    }
  }

</script>

<style>
  #app{
    width: 100%;
    height: 100%;
    background-color: #2e2a29!important;
    margin: 0 auto;
    font-family: 'Montserrat-Regular', 'STYuanti-SC-Regular', 'hyppt'!important;
  }
</style>
